<template>
  <a-form
    class="login"
    layout="horizontal"
    :model="formState"
    @finish="handleFinish"
  >
    <a-form-item>
      <a-input v-model:value="formState.user" placeholder="Username">
        <template><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input
        v-model:value="formState.password"
        type="password"
        placeholder="Password"
      >
        <template><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-button
        block
        type="primary"
        html-type="submit"
        :disabled="formState.user === '' || formState.password === ''"
      >
        Log in
      </a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts">
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { ValidateErrorEntity } from "ant-design-vue/es/form/interface";
import { defineComponent, reactive, UnwrapRef } from "vue";
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
interface FormState {
  user: string;
  password: string;
}
export default defineComponent({
  setup() {
    const router = useRouter();
    const store = useStore();
    const formState: UnwrapRef<FormState> = reactive({
      user: "",
      password: "",
    });
    const handleFinish = (values: FormState) => {
        if(formState.user == 'admin' && formState.password == 'admin'){
          store.dispatch('user/setToken',"这是一个token，有token可以使用了").then(res=>{
            if(res){
              router.push('/home')
            }
          })
        }else{
          message.error(' Incorrect user name or password ！ ')
        }
    };
    return {
      formState,
      handleFinish,
    };
  },
  components: {
    UserOutlined,
    LockOutlined,
  },
});
</script>
<style lang="scss" scoped>
  .login{
    width: 50%;
    margin: 50px auto;
  }
</style>